<template>
  <div class="admin"> 
      <el-card v-loading="pager.loading" class="!border-none" shadow="never">
<!--           <el-button type="primary" @click="handleAdd">-->
<!--              <template #icon>-->
<!--                  <icon name="el-icon-Plus" />-->
<!--              </template>-->
<!--              新增Agent-->
<!--          </el-button>-->

          <div>
              <el-table :data="pager.lists" size="large">
                <el-table-column label="Logo" width="100">
                      <template #default="{ row }">
                          <image-contain
                              v-if="row.logo"
                              :src="row.logo"
                              :width="60"
                              :height="45"
                              :preview-src-list="[row.logo]"
                              preview-teleported
                              fit="contain"
                          />
                      </template>
                  </el-table-column>

                  <el-table-column label="名称" prop="title" />
                  <el-table-column label="非会员单次消耗金币" prop="coin" />
                  <el-table-column label="非会员扫码支付金额" prop="scanCodeAmount" />
                  <el-table-column label="会员单次消耗金币" prop="coinVip" />

                <el-table-column label="状态" width="100">
                  <template #default="{ row }">
                    <span v-if="Number(row.state)===1">启用</span>
                    <span v-if="Number(row.state)===0">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column label="分类" width="100">
                  <template #default="{ row }">
                    <span v-if="Number(row.bussType)===1">法务</span>
                    <span v-if="Number(row.bussType)===2">财会</span>
                    <span v-if="Number(row.bussType)===3">人力</span>
                    <span v-if="Number(row.bussType)===4">申报（项目管理）</span>
                    <span v-if="Number(row.bussType)===5">市场运营</span>
                    <span v-if="Number(row.bussType)===6">通用</span>
                  </template>
                </el-table-column>
	

                  
                  <el-table-column label="操作" fixed="right"  width="120" >
                      <template #default="{ row }">
                          <div class="flex items-center"  v-perms="['agent/edit']">
                            <el-button
                              type="primary"
                              link
                              @click="handleEdit(row)"
                          >
                              编辑
                          </el-button> 
                          </div>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="flex justify-end mt-4">
                  <pagination v-model="pager" @change="getLists" />
              </div>
          </div> 
      </el-card>


      <edit-popup v-if="showEdit" ref="editRef" @success="handleSuccess" @close="showEdit = false" />
      
  </div>
</template>

<script setup name="admin">
import {ref} from 'vue'
import { getList } from '@/apis/agent' 
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'


const showPopup = ref(false)
const showConsumptionDialog = ref(false)
const showRechargeDialog = ref(false)
const showUsageRanking = ref(false)
const date = ref('')
const vipName = ref('')
const vipId = ref('')
const editRef = ref(null)
const showEdit = ref(false)
const queryParams = reactive({
    type: 0, // 1: 代理, 0: 用户
})


const handleSuccess = (type) => {
  getLists()
}

 

  const handleEdit = async (data) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
  }
const { pager, getLists } = usePaging({
  fetchFun: getList,

})

const handleAdd = async () => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('add')
}


onMounted(() => {
  getLists()
})
</script>


<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  outline: none;
}

.tab {
  display: flex;
  margin: 16px 0;
  border-bottom: 1px solid #e4e7ed;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  color: #606266;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  font-weight: 500;
}

.tab-item:hover {
  color: var(--el-color-primary);
}

.tab-item.active {
  color: var(--el-color-primary);
  border-bottom-color: var(--el-color-primary);
}
</style>
